<template>
	<view>
		<uni-nav-bar :title="$t('personal.text13')" :fixed="true" :border="false" color="var(--theme-text-color)" backgroundColor="var(--theme-color)"></uni-nav-bar>
		<view class="icon-xl circle flex-center back-btn" style="position: fixed;top: 5px;left: 16px;z-index: 100;" @click="backPage">
			<uni-icons type="arrow-left" size="24" color="#fff"></uni-icons>
		</view>
		<view class="p-lr-16" v-show="list.length > 0">
			<view class="">
				<view class="item radius-12 page-aid mt10 text-des-color" v-for="(item,index) in list" :key="index">
					<view class="flex-between mt5">
						<view class="" style="display: flex;flex-direction: column;">
							<text class="text-main-color">{{item.price}}</text>
							<view class="fs12 mt5">
								<text>{{$t('personal.text17')}}</text>
								<text style="margin-left: 5px;">{{item.orderno}}</text>
							</view>
						</view>
						<view class="fs14" style="display: flex;flex-direction: column;align-items: flex-end;">
							<text :class="item.status==0?'warning-color':item.status==0?'text-up':'text-down'">{{item.status==0?$t('approval'):item.status==1?$t('success'):$t('failed')}}</text>
							<text class="mt5">{{formatTime(item.createtime*1000)}}</text>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="loadStatus" :contentText="contentText"  @clickLoadMore="loadMore"></uni-load-more>
		</view>
		<!-- 空展示图片 -->
		<view class="" v-show="list.length == 0">
			<view class="empty flex-column">
				<image src="/static/cjempty.png" mode=""></image>
				<text class="text-des-color fs14">{{$t('personal.text23')}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { onMounted, ref } from "vue"
	import { getWithdrawalList } from "../../../api";
	import { formatTime } from '../../../utils/utils.js'
	import { onReachBottom } from '@dcloudio/uni-app'
	import useGlobalProperties from '../../../utils/useGlobalProperties.js'
	const { $t,$i18n } = useGlobalProperties()
	const list = ref([])
	const page = ref(1)
	const loading = ref(false)
	const finished = ref(false)
	const loadStatus = ref('loading')
	const contentText = {
		contentdown: $t('loadMore'),
		contentrefresh: $t('loading'),
		contentnomore: $t('noMore')
	}
	const backPage = () =>{
		// 返回上一页
		// uni.navigateBack({
		//   delta: 1 // 默认值为1，表示返回上一页
		// });
		history.back()
	}
	const loadMore = () =>{
		if(finished.value) return;
		loading.value = true
		getWithdrawalList({page:page.value++}).then(res =>{
			// console.log('出金记录 res',res);
			loading.value = false
			if(res.data.list.length == 0){
				finished.value = true
				loadStatus.value = 'noMore'
			}else{
				loadStatus.value = res.data.length==10?'more':'noMore'
				list.value = list.value.concat(res.data.list)
			}
		})
	}
	onReachBottom(()=>{
		// console.log("触底了");
		if (finished.value || loading.value) return; // 如果已加载完或正在加载，则不执行
		loadMore();
	})
	onMounted(() =>{
		loadMore();
	})
</script>

<style scoped>
.empty{
	margin-top: 120px;
}
.empty image {
    width: 176px;
    height: 176px;
}
.item{
    padding: 12px;
	background-color: var(--theme-box-bg);
}
</style>
